<template>
  <el-card class="role-conterner">
    <template #header>
      <div class="role-query" :style="{ height: '90px' }">
        <div class="role-query-title">
          <span class="normal-title">角色</span><span class="title-description">角色管理</span>
        </div>
        <el-form class="role-query-form" :model="roleQueryFormData" :inline="true">
          <el-form-item label="名称 :">
            <el-input v-model="roleQueryFormData.name" placeholder="请输入..." />
          </el-form-item>
          <el-form-item style="margin-left: auto">
            <el-button @click="reset">重置</el-button>
            <el-button @click="startQuery">查询</el-button>
            <el-button type="primary" size="small" @click="addRole">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <div class="card-body-conterner">
      <el-table
        :data="paginatedTableData"
        style="width: 100%"
        class="role-table"
        header-cell-class-name="role-table-header-cell"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="名称" prop="name"> </el-table-column>
        <el-table-column label="操作" width="200px">
          <template #default="scope">
            <el-tooltip class="box-item" effect="dark" content="删除" placement="bottom">
              <img
                style="cursor: pointer"
                src="@/assets/images/delete.png"
                fit="contain"
                @click="handleDelete(scope.row)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="totalOrignTableData > 10"
        v-model:current-page="roleQueryFormData.pageNum"
        v-model:page-size="roleQueryFormData.pageSize"
        class="role-pagination"
        :page-sizes="[10, 20, 50, 100]"
        :background="true"
        layout="prev, pager, next, total, sizes"
        :total="totalOrignTableData"
      />
    </div>
    <addOrUpdate ref="addOrUpdateRef" @update-roles="updateWorkspace"></addOrUpdate>
  </el-card>
</template>

<script setup lang="ts" name="authButton">
import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
import addOrUpdate from './addOrUpdate.vue'
import { computed, onMounted, reactive, ref } from 'vue'
import type { IWorkspace } from 'geoserver-helper/interface'
import { restHelperInstance } from '@/composables/useGeoHelper'

interface roleFormDialogExpose {
  openDialog: (opentionTypeParam?: string) => void
  setOrignWorkspace: (orignWorkspaceParam: IWorkspace.WorkspaceOverview) => void
}
const addOrUpdateRef = ref<roleFormDialogExpose | undefined>()
const roleQueryFormData = reactive({
  name: '',
  pageNum: 1,
  pageSize: 10,
})
// 选中的工作空间
const workspaceSelection = ref<IRoleInfo[]>([])
/**
 * @description: 表格选中事件
 * @param {*} val
 * @return {*}
 */
const handleSelectionChange = (val: IRoleInfo[]) => {
  workspaceSelection.value = val
}
interface IRoleInfo {
  name:string
}
const orignTableData = ref<IRoleInfo[]>([])

//分页数据
const paginatedTableData = computed(() => {
  return orignTableData.value.slice(
    (roleQueryFormData.pageNum - 1) * roleQueryFormData.pageSize,
    roleQueryFormData.pageNum * roleQueryFormData.pageSize,
  )
})
// 数据总数
const totalOrignTableData = ref(0)

/**
 * @description: 重置
 * @return {*}
 */
const reset = () => {
  roleQueryFormData.name = ''
  roleQueryFormData.pageNum = 1
  roleQueryFormData.pageSize = 10
}

/**
 * @description: 查询工作空间
 * @return {*}
 */
const startQuery = () => {
  totalOrignTableData.value = 0
  orignTableData.value = []
  restHelperInstance.getRoles().then((res) => {
    res.roles.forEach((eachItem) => {
      if (!roleQueryFormData.name || String(eachItem).includes(roleQueryFormData.name)) {
        totalOrignTableData.value += 1
        orignTableData.value.push({
          name: eachItem,
        })
      }
    })
  })
}

/**
 * @description: 更新工作空间
 * @return {*}
 */
const updateWorkspace = () => {
  startQuery()
}
const addRole = () => {
  if (addOrUpdateRef.value) {
    addOrUpdateRef.value.openDialog('新增')
  }
}
const handleDelete = (row: IRoleInfo) => {
  ElMessageBox.confirm('确认删除该角色么?', '', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      restHelperInstance.deleteRole(row.name).then((res) => {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        startQuery()
      })
    })
    .catch(() => {})
}

onMounted(() => {
  startQuery()
})
</script>

<style scoped lang="scss">
@import './index';
</style>
